<template>
	<view class="content">
		<view class="bg">
			<swiper class="swiper" previous-margin="54rpx" next-margin="54rpx" :indicator-dots="indicatorDots"
				@change="change" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
				<swiper-item v-for="(itt,idx) in item" :key="idx">
					<hm-cover-card @dianzan="like" @click="details" :options="itt" :index="index==idx?true:false"
						:idx="idx"></hm-cover-card>
				</swiper-item>
			</swiper>
		</view>
		<foot-tab :index="1" @switchTab="switchTab"></foot-tab>
	</view>
</template>

<script>
	import HmCoverCard from '@/components/yang-cover-card/index.vue'
	import API from '@/json/json.js'
	export default {
		components: {
			HmCoverCard
		},
		data() {
			return {
				title: 'Hello',
				indicatorDots: false, //是否显示轮播点
				autoplay: false, //是否自动切换
				interval: 5000, //自动切换时间间隔（滑块停留在当前的时长）
				duration: 500, //滑动动画时长（切换到下一个滑块时所用的时长）
				circular: true, //是否采用衔接滑动，即播放到末尾后重新回到开头
				item: [],
				index: 0,

			}
		},
		async onShow() {
			uni.hideTabBar()
			this.init();
		},
		onPullDownRefresh() {
			this.item = [];
			setTimeout(() => {
				this.init();
				uni.hideNavigationBarLoading();
				// 停止下拉动作
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			change(e) {
				this.index = e.detail.current
				//this.init();
			},
			async init() {
				uni.showLoading({
					title: '加载中...'
				})

				var items = API.Index_index
				uni.hideLoading();
				items.map((itd) => {
					let options = {
						id: itd.id,
						entryPic: itd.good_cover,
						title: itd.name,
						text: itd.content,
						zan: itd.zan,
						shoucang: '/static/hm-cover-card/images/img_25361_0_0.png'
					}
					if(this.item.findIndex(x => x.id === options.id)==-1){
						this.item.push(options)
					}
				})

			},
			like(val) {
				if (val.zan) {
					this.item[val.idx].zan++
					// 将文章添加进点赞历史
					this.setZanHistory(val.idx)
				} else {
					this.item[val.idx].zan--
					// 将文章移除进点赞历史
					this.removeZanHistory(val.idx)
				}
				// this.init();
			},
			details(val) {
				uni.navigateTo({
					url: '/pages/photo/detail/detail?id=' + val.id
				})
			},
			// 将文章加入点赞历史
			setZanHistory(idx) {
			  // 获取点赞历史缓存，如果不存在则为空数组
			  const historyCache = uni.getStorageSync('zanHistory') || []
			  // 过滤掉当前文章的点赞历史
			  const zanHistory = historyCache.filter(item => item.article_id !== idx)
			  // 将当前文章的点赞历史添加到数组最前面
			  zanHistory.unshift({
				article_id: idx,
				last_time: Date.now()
			  })
			  // 将更新后的点赞历史缓存到本地
			  uni.setStorageSync('zanHistory', zanHistory)

			},
			// 将文章移除点赞历史
			removeZanHistory(idx) {
			  // 获取点赞历史缓存，如果不存在则为空数组
			  const historyCache = uni.getStorageSync('zanHistory') || []
			  // 过滤掉当前文章的点赞历史
			  const zanHistory = historyCache.filter(item => item.article_id !== idx)
			  // 将更新后的点赞历史缓存到本地
			  uni.setStorageSync('zanHistory', zanHistory)

			},
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #f3f4f6;
	}
	.content {
		width: 100%;
		height: calc(94vh);
		position: relative;

		.bg {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: calc(94vh);
			box-sizing: border-box;
			flex-direction: column;

			.swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					flex-direction: column;
				}
			}


		}

	}
</style>